<!-- 实践操作模块入口 -->
<!-- 展示全部的已经发布的资源列表信息 -->
<template>
	<div class="source-list">
		<div class="header">
			<div class="collect">
				<div class="collect-item">
					<label for="">
						实践名称:
					</label>
					<el-input
						placeholder=""
						v-model="practiceName"
						style="width: 200px"
					>
					</el-input>
				</div>
				<div class="collect-item">
					<label for="">
						时间范围：
					</label>
					<el-date-picker
						v-model="dateTime"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="pickerOptions"
					>
					</el-date-picker>
				</div>
				<el-button
					@click="filter()"
					type="primary"
					size="small"
				>
					<i class="el-icon-search">
					</i>
					查询
				</el-button>
				<el-button
					@click="refresh()"
					type="primary"
					size="small"
				>
					<i class="el-icon-refresh-left"></i>
					刷新
				</el-button>
			</div>
		</div>
		<div class="op">
			<!-- 新增成功之后，会在审核界面看到记录，
      		管理员或者平台审核成功之后，才会更新到资源列表界面 -->
			<el-button
				@click="addSource()"
				type="success"
				size="small"
			>
				<i class="el-icon-plus"></i>
				新增实践操作
			</el-button>
			<el-button
				@click="multipleDelete()"
				type="danger"
				size="small"
			>
				<i class="el-icon-delete"></i>
				批量删除
			</el-button>
			<el-button
				@click="multipleDownLoad()"
				type="primary"
				size="small"
			>
				<i class="el-icon-download"></i>
				批量下载
			</el-button>
		</div>
		<!-- 数据展示 -->
		<el-table
			:data="currentPageData"
			element-loading-text="Loading"
			border
			fit
			highlight-current-row
		>
			<el-table-column
				align="center"
				width="50"
			>
				<template
					slot="header"
					slot-scope="scope"
				>
					<el-checkbox
						v-model="isCheckedAll"
						@click="checkedAll"
					>
					</el-checkbox>
				</template>
				<template slot-scope="scope">
					<el-checkbox
						v-model="scope.row.checked"
						@change="ifChecked(row)"
					>
					</el-checkbox>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="实践编号"
				width="100"
			>
				<template slot-scope="scope">
					{{ 
						scope.row.resource_id + "" 
					}}
				</template>
			</el-table-column>

			<el-table-column
				label="实践名称"
				align="center"
			>
				<template slot-scope="scope">
					{{ 
						scope.row.resource_name || "--" 
					}}
				</template>
			</el-table-column>
			<el-table-column
				label="实践人"
				align="center"
			>
				<template slot-scope="scope">
					{{ 
						scope.row.practitioner || "--" 
					}}
				</template>
			</el-table-column>
			<el-table-column
				label="开始时间"
				align="center"
			>
				<template slot-scope="scope">
					{{ 
						scope.row.upload_time 
					}}
				</template>
			</el-table-column>
			<el-table-column
				label="结束时间"
				align="center"
			>
				<template slot-scope="scope">
					{{ 
						scope.row.end_time 
					}}
				</template>
			</el-table-column>
			<el-table-column
				label="实践状态"
				align="center"
			>
				<template slot-scope="scope">
					<el-tag
						type="primary"
						v-if="scope.row.review_status === 1"
					>
						进行中
					</el-tag>
					<el-tag
						type="info"
						v-if="scope.row.review_status === 2"
					>
						未完成
					</el-tag>
					<el-tag
						type="info"
						v-if="scope.row.review_status === 3"
					>
						已完成
					</el-tag>
					<span v-if="
                  scope.row.review_status !== 1 &&
                  scope.row.review_status !== 2
                ">
						--
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="created_at"
				label="操作"
			>
				<template slot-scope="scope">
					<el-button
						@click.native.prevent="edit(scope)"
						type="primary"
						size="small"
					>
						<i class="el-icon-edit"></i>
						编辑
					</el-button>
					<el-button
						@click.native.prevent="deleteSource(scope)"
						type="danger"
						size="small"
					>
						<i class="el-icon-delete"></i>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination
			class="pagination"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="currentPageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="7"
		>
		</el-pagination>
	</div>
</template>

<script>
// 引入loading
import { Loading } from "element-ui";
// 引入请求
import request from "@/utils/request";

export default {
	data() {
		return {
			// 资源分类
			sourceSort: "",
			sourceSortList: [],
			// 资源名称
			practiceName: "",
			// 用户选择时间，0 开始时间  1 结束时间
			dateTime: [],
			// 全部数据，用于存储当前查询到的所有数据，方便分页功能
			allData: [],
			// 筛选数据,用于存储当前筛选的数据
			filterData: [],
			//当前页数据
			currentPageData: [],
			// 当前页，默认第一页
			currentPage: 1,
			// 当前页大小，默认每页10条数据
			currentPageSize: 10,
			// 当前数据总数
			paginationTotal: 0,
			// 用户时间选择，提供快捷方式
			pickerOptions: {
				shortcuts: [
					{
						text: "最近5分钟",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(
								start.getTime() - 1200 * 1000 * 2 * 0.5 * 0.5 * 0.5
							);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近1小时",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(
								start.getTime() - 3600 * 1000 * 8 * 0.5 * 0.5 * 0.5
							);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近3小时",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(
								start.getTime() - 3600 * 1000 * 24 * 0.5 * 0.5 * 0.5
							);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近6小时",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 0.5 * 0.5);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近12小时",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 0.5);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近1天",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近三天",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近一周",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近半个月",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近一个月",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近三个月",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近6个月",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近一年",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
							picker.$emit("pick", [start, end]);
						},
					},
				],
			},
			//全选所有页
			checkedAll: false,
		};
	},
	created() {
		// 模块初始化事件入口
		this.init();
	},
	methods: {
		/**
		 * @desc init
		 */
		init() {
			// 获取用户资源分类下拉列表数据
			this.getSourceSortList();
			// 获取资源数据
			this.getSourceDataList();
		},
		/**
		 * @desc 获取资源分类数据
		 */
		getSourceSortList() {
			let data = {};
			request({
				url: "/vue-admin-template/resource/sort",
				method: "get",
				data,
			})
				.then((res) => {
					if (res.code === 20000) {
						if (typeof res.data === "object" && Object.keys(res.data)) {
							let temp = res.data.sort_list;
							let arr = [];
							// 去重
							let ids = [];
							temp.forEach((item) => {
								if (ids.indexOf(item.sort_id) == -1) {
									ids.push(item.sort_id);
									arr.push({
										sort_id: item.sort_id,
										sort_name: item.sort_name,
									});
								}
							});
							console.log(arr);
							// 排序
							for (let i = 0; i < arr.length - 1; i++) {
								for (let j = 1; j < arr.length - 1 - i; j++) {
									if (arr[j] > arr[i]) {
										// 交换位置
										[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
									}
								}
							}

							console.log("排序结果：", arr);
							this.sourceSortList = arr;
						}
					}
				})
				.catch((err) => {
					setTimeout(() => {
						this.$message({
							message: "接口错误",
							type: "error",
						});
					});
				});
		},
		/**
		 * @desc 获取当前资源列表数据
		 */
		getSourceDataList() {
			// loading 开启
			const loading = this.$loading({
				lock: true,
				text: "正在加载数据，请耐心等待...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			let postData = {
				size: this.currentPageSize,
				page: this.currentPage,
				sex: this.userSort,
				user_name: this.userName,
				dateTime: this.dateTime,
			};
			request({
				url: "/vue-admin-template/resource/list",
				method: "post",
				postData,
			})
				.then((response) => {
					/**
					 * @desc 对返回的数据进行格式整理
					 */
					response.data.list.forEach((element) => {
						// 步骤状态必须是int类型
						element.step_status = parseInt(element.step_status);
						// 性别id必须是int类型
						element.sex = parseInt(element.sex);
						// 格式化开始识别时间
						element.create_time = this.formData(
							element.create_time,
							"yyyy-MM-DD HH:mm:ss"
						);
						// 格式化最后更新时间
						element.update_time = this.formData(
							element.update_time,
							"yyyy-MM-DD HH:mm:ss"
						);
					});
					this.currentPageData = response.data.list;
					this.paginationTotal = response.data.total;
					// 关闭loading
					setTimeout(() => {
						loading.close();
					}, 500);
				})
				.catch((err) => {
					// 关闭loading
					setTimeout(() => {
						loading.close();
					}, 500);
				});
		},
		/**
		 * @desc 新增
		 * 1、新增打开资源上传弹窗
		 * 2、
		 */
		addSource() {},
		/**
		 * @desc 批量删除
		 * 1、只有用户当前勾选了资源才会触发，否则提示用户
		 * 2、批量删除, 需要用户进行二次确认，才能进行删除，避免用户误删操作的产生
		 * 3、删除之后的数据，会保存一段时间，用户可以这个保留的时间内在回收站进行找回
		 */
		multipleDelete() {},
		/**
		 * @desc 批量下载
		 */
		multipleDownLoad() {},
		/**
		 * @desc 时间格式化（时间戳转化为日期）
		 */
		formData(data, format) {
			data = new Date(data);
			let time = {
				"M+": data.getMonth() + 1,
				"D+": data.getDate(),
				"H+": data.getHours(),
				"m+": data.getMinutes(),
				"s+": data.getSeconds(),
			};

			if (/(y+)/i.test(format)) {
				format = format.replace(
					RegExp.$1,
					(data.getFullYear() + "").substr(4 - RegExp.$1.length)
				);
			}

			for (let k in time) {
				if (new RegExp("(" + k + ")").test(format)) {
					format = format.replace(
						RegExp.$1,
						RegExp.$1.length === 1
							? time[k]
							: ("00" + time[k]).substr(("" + time[k]).length)
					);
				}
			}
			return format;
		},
		/**
		 * @desc 监听分页器大小改变
		 */
		handleSizeChange(size) {
			// 更新当前分页器显示总数大小
			this.currentPageSize = size;
			// 刷新数据
			search();
		},
		/**
		 * @desc 监听当前页大小改变
		 */
		handleCurrentChange(page) {
			// 更新当前分页器页数
			this.currentPage = page;
			// 刷新数据
			search();
		},
		// 弹窗关闭
		handleClose() {},
	},
};
</script>
<style lang="scss" scoped>
.source-list {
	padding: 20px 10px;
}
.header {
	display: flex;
	justify-content: space-between;
	height: 32px !important;
	margin-bottom: 20px;
}
.op {
	display: flex;
	justify-self: start;
	margin-bottom: 10px;
}
.collect {
	display: flex;
	justify-content: flex-start;
}
.collect .collect-item {
	margin-right: 20px;
}
.pagination {
	margin-top: 20px;
	float: right;
}
.content {
	.item {
		margin: 20px 0px;
		.title {
			font-size: 16px;
			font-weight: 700;
			color: rgb(28, 48, 230);
		}
		.desc {
			img: {
				height: 100px;
				width: 100px;
				border-radius: 20px;
			}
		}
	}
}
</style>
